<template>
  <div  style="height: 765px;" class="note" :style ="note" >

      <el-row :gutter="0" style="border: 1px solid white;margin-top: 20px">
        <el-col :span="24" :offset="0" style="text-align: left">
          <div style="border-bottom: 1px solid red">
            <el-button type="text " icon="el-icon-c-scale-to-original" style="text-align: center;font-size: x-large ">个人信息注册</el-button>
          </div>
        </el-col>
      </el-row>


<div style="margin-top: 170px;padding-right: 20px">

        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="用户名" class="item">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" class="item">
            <el-input v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item label="手机号" style="width: 70%;float: left" class="item">
            <el-input v-model="form.phone"></el-input>
          </el-form-item>
          <el-button type="primary" @click="sendCode" :plain="true" >发送验证码</el-button><br>
          <el-form-item label="验证码" style="width: 100%;padding-top: 25px" class="item">
            <el-input v-model="form.code"></el-input>
          </el-form-item>

          <el-form-item style="padding-top: 50px">
            <el-button style="margin-right: 70px" @click="tianzhuan()">取消</el-button>
            <el-button type="primary" @click="onSubmit" :plain="true" style="margin-right: 40px">注册</el-button>
          </el-form-item>
        </el-form>


        <el-dialog
          title="上传图片"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <span  style="background-color: burlywood">

            <el-upload
              class="upload-demo"
              action="http://localhost:9999/credit-user/addImage"
              :on-preview="handlePreview"
              :data="{'username':this.form.username}"
              multiple="false">
              <el-tooltip :disabled="disabled" content="只能上传jpg/png文件，且不超过500kb" placement="bottom" effect="light">
                   <el-button size="small" type="primary" style="line-height: 40px;font-size: large;color: crimson">请上传一张正面照片，用于认证<i class="el-icon-upload el-icon--right"></i></el-button>
              </el-tooltip>
          </el-upload>
          </span>
          <span slot="footer" class="dialog-footer">
          <el-button >取 消</el-button>
          <el-button type="primary" @click="successs">确 定</el-button>
        </span>
        </el-dialog>



</div>
    </div>

</template>

<script>
  import axios from 'axios'
  export default {

    name: 'productdetailspage',
    data() {
      return {
        form: {},
        note: {
          /*  backgroundImage: "url(" + require("../assets/16025846693882.jpg") + ")",*/
          backgroundImage: "url(" + require("../../../assets/20201111172528.png") + ")",
          /* backgroundImage:'url(//wegame.gtimg.com/g.2001399-r.15082/info/0e0c93073be2b00794bb569779949f68.jpg/320)',*/
          backgroundSize:'100% 100%',
        },
        dialogVisible: false,
        disabled: false
      }
    },
    methods: {
      tianzhuan:function(){
        this.dialogVisible = false
        this.$router.push("/personal")
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      successs(){
        this.$router.push("/borrow");
      },
      sendCode:function () {
        axios.post("http://localhost:9999/credit-user/sendCode",{phone:this.form.phone}).then(res=>{
          if(res.data.code==200){
           const h = this.$createElement;
            this.$message({
              message: h('p', null, [
                h('span', null, '手机验证码发送 '),
                h('i', { style: 'color: red' }, '成功')
              ])
            });
          }
        })
      },
      onSubmit:function() {
       var ss=this.tupian;
        axios.post("http://localhost:9999/credit-user/registry2",{borrower:this.form,phone:this.form.phone,code:this.form.code}).then(res=>{
          if(res.data.code==2009){
            alert(res.data.message)
            /*注册成功，调到首页*/
            //this.$router.push("/borrow")
            this.dialogVisible=true;
          }else{
            var mess=res.data.message;
            this.$message(mess);
          }
        })
      },
    }
  }
</script>

<style >
  .item .el-form-item__label{
    color: black;
    font-size: large;
  }
</style>
